<!DOCTYPE HTML>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Draft Tree</title> 
 
<!-- CSS Files --> 
<link type="text/css" href="./../lib/jit/base.css" rel="stylesheet" /> 
<link type="text/css" href="./../lib/jit/Spacetree.css" rel="stylesheet" /> 

</head> 
 
<body > 


<div id="container">
 
<div id="left-container"> 
 <h3>Draft Tree</h3>
 
<!-- Didnt need anymore on 2.x, javascript was loading in sequential order but in 3.x it is not-->
<input type="button" value="Refresh"  />
<input type="button" value="Export/Email..." />
<!-- TODO Itteration 3 add button "Hide Deleted Nodes" -->
<h4>Tree Orientation</h4> 
<table> 
    <tr> 
         <td> 
            <label for="r-top">Top </label> 
         </td> 
         <td> 
            <input type="radio" id="r-top" name="orientation" checked="checked" value="top"   /> 
         </td> 
    </tr> 
    <tr> 
        <td> 
            <label for="r-left">Left </label> 
        </td> 
        <td> 
            <input type="radio" id="r-left" name="orientation"  value="left" /> 
        </td> 
    </tr> 

    <tr> 
         <td> 
            <label for="r-bottom">Bottom </label> 
          </td> 
          <td> 
            <input type="radio" id="r-bottom" name="orientation" value="bottom" /> 
          </td> 
    </tr> 
    <tr> 
          <td> 
            <label for="r-right">Right </label> 
          </td> 
          <td> 
           <input type="radio" id="r-right" name="orientation" value="right" /> 
          </td> 
    </tr> 

</table> 
 
 <h4 style="display:none;">Selection Mode</h4> 
<table > 
    <tr> 
        <td> 
            <label for="s-normal">Normal </label> 
        </td> 
        <td> 
            <input type="radio" id="s-normal" name="selection" checked="checked" value="normal"   /> 
        </td> 
    </tr> 
    <tr> 
         <td> 
            <label for="s-root">Set as Root </label> 
         </td> 
         <td> 
            <input type="radio" id="s-root" name="selection" value="root" /> 
         </td> 
    </tr> 
</table> 

</div> 

<div id="center-container"> 

 
    <div id="infovis" ></div>    
    
<div id="log"></div> 
</div> 

</div>

<!-- Use HTML5 lazy loading -->
<script src="./../lib/Utils.js"></script>
<script src="./../lib/jquery.js"></script>
<!-- JIT Library File --> 
<script src="./../lib/jit/SpaceTree.js"></script> 
<script src="./../src/DraftsTree_sample_data.js"></script> 
<script src="./../src/DraftsTree.js"></script>

</body> 
</html>
